<template>
  <div id="echartContainer10"></div>
</template>

<script>
  //从option.js中引入option
  // import { option10 } from '../../static/data/option10';
  import 'echarts/map/js/china.js';

  export default {
    name: 'component2',
    props: {
      positionByCity: {
        default: function () {
          return [{name: "北京", value: 25866},
            {name: "天津", value: 700},
            {name: "上海", value: 7620},
            {name: "重庆", value: 459},
            {name: "河北", value: 344},
            {name: "山西", value: 185},
            {name: "辽宁", value: 142},
            {name: "吉林", value: 32},
            {name: "黑龙江", value: 24},
            {name: "江苏", value: 521},
            {name: "浙江", value: 1186},
            {name: "安徽", value: 220},
            {name: "福建", value: 251},
            {name: "江西", value: 318},
            {name: "山东", value: 533},
            {name: "河南", value: 382},
            {name: "湖北", value: 120},
            {name: "湖南", value: 261},
            {name: "广东", value: 786},
            {name: "海南", value: 52},
            {name: "四川", value: 225},
            {name: "贵州", value: 46},
            {name: "云南", value: 68},
            {name: "陕西", value: 145},
            {name: "甘肃", value: 66},
            {name: "青海", value: 24},
            {name: "台湾", value: 1},
            {name: "内蒙古自治区", value: 7},
            {name: "广西壮族自治区", value: 2},
            {name: "西藏自治区", value: 0},
            {name: "宁夏回族自治区", value: 1},
            {name: "新疆维吾尔自治区", value: 10006},
            {name: "香港特别行政区", value: 0},
            {name: "澳门特别行政区", value: 0}]
        }

      }
    },
    data() {
      return {};
    },
    methods: {
      drawBarChart() {
        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.getInstanceByDom(document.getElementById('echartContainer10'));
        if (!myChart) {
          myChart = this.$echarts.init(document.getElementById('echartContainer10'));
        }
        // var myChart = this.$echarts.init(document.getElementById('echartContainer10'));

        //将绘图部分与初始化echarts实例分离
        this.drawMap()

      },
      drawMap() {
        let myChart = this.$echarts.getInstanceByDom(document.getElementById('echartContainer10'));
        if (!myChart) {
          myChart = this.$echarts.init(document.getElementById('echartContainer10'));
        }

        // 绘制基本图表
        var mapName = 'china';
        let [...data] = this.positionByCity; //深拷贝
        var geoCoordMap = {};

        /*获取地图数据*/
        var mapFeatures = this.$echarts.getMap(mapName).geoJson.features;
        // console.log(this.$echarts.getMap(mapName).geoJson)
        // console.log(this.$echarts.getMap(mapName).geoJson.features)
        mapFeatures.forEach(function (v) {
          // console.info(v)
          // 地区名称
          var name = v.properties.name;
          // 地区经纬度
          geoCoordMap[name] = v.properties.cp;
        });
        // console.log(geoCoordMap)

        // console.log(data)
        var max = 480,
          min = 9; // todo
        var maxSize4Pin = 150,
          minSize4Pin = 20;

        var convertData = function (data) {
          var res = [];
          for (var i = 0; i < data.length; i++) {
            var geoCoord = geoCoordMap[data[i].name];
            if (geoCoord) {
              res.push({
                name: data[i].name,
                value: geoCoord.concat(data[i].value),
              });
            }
          }
          // console.log(res)
          return res;
        };
        var option = {
          // newDashboard 去除title
          // title: {
          //   text: '互联网开发招聘实时监控',
          //   x: 'center',
          //   color: 'white',
          //   textStyle: {
          //     fontSize: 25,//字体大小
          //     color: '#ffffff',//字体颜色
          //     margin: [0, 0, 0, 10]
          //   },
          //   subtext: 'Internet Development Jobs',
          // },
          tooltip: {
            trigger: 'item',
            formatter: function (params) {
              // console.log(params)
              if (typeof (params.value)[2] == "undefined") {
                return params.name + ' : ' + params.value;
              } else {
                return params.name + ' : ' + params.value[2];
              }
            }
          },
          legend: {
            orient: 'vertical',
            y: 'bottom',
            x: 'right',
            data: ['credit_pm2.5'],
            textStyle: {
              color: '#fff'
            }
          },
          geo: {
            show: true,
            map: mapName,
            label: {
              normal: {
                show: false
              },
              emphasis: {
                show: false,
              }
            },
            roam: false,//禁止缩放
            zoom: 1.15,
            itemStyle: {
              normal: {
                areaColor: '#031525',
                borderColor: '#097bba',
              },
              emphasis: {
                areaColor: '#2B91B7',
              }
            }
          },
          series: [
            //散点
            {
              name: '散点',
              type: 'effectScatter',
              coordinateSystem: 'geo',
              // data: convertData(data),
              data: data,
              symbolSize: function (val) {
                return 5;
              },
              // label: {
              //   normal: {
              //     formatter: '{b}',
              //     position: 'right',
              //     show: true
              //   },
              //   emphasis: {
              //     show: true
              //   }
              // },
              itemStyle: {
                normal: {
                  color: '#05C3F9'
                }
              }
            },
            //区域颜色
            // {
            //   type: 'map',
            //   map: mapName,
            //   geoIndex: 0,
            //   aspectScale: 0.75, //长宽比
            //   showLegendSymbol: false, // 存在legend时显示
            //   label: {
            //     normal: {
            //       show: false
            //     },
            //     emphasis: {
            //       show: false,
            //       textStyle: {
            //         color: '#fff'
            //       }
            //     }
            //   },
            //   roam: true,
            //   itemStyle: {
            //     normal: {
            //       areaColor: '#031525',
            //       borderColor: '#3B5077',
            //     },
            //     emphasis: {
            //       areaColor: '#2B91B7'
            //     }
            //   },
            //   animation: false,
            //   data: data
            // },
            //气泡
            {
              name: 'Top 5',
              type: 'effectScatter',
              coordinateSystem: 'geo',
              // data: convertData(data.sort(function (a, b) {
              //   return b.value - a.value;
              // }).slice(0, 6)),
              data: data.sort(function (a, b) {
                return b.value - a.value;
              }).slice(0, 6),
              symbolSize: function (val) {
                return 15;
              },
              showEffectOn: 'render',
              rippleEffect: {
                brushType: 'stroke'
              },
              hoverAnimation: true,
              label: {
                normal: {
                  formatter: '{b}',
                  position: 'right',
                  show: true//bug：设置为true造成top5的省份名称重影
                }
              },
              itemStyle: {
                normal: {
                  color: '#AD3AFC',
                  shadowBlur: 10,
                  shadowColor: '#BE5BFE'
                }
              },
              zlevel: 1
            },

          ],
          animationDuration: function (idx) {
            // 越往后的数据延迟越大
            return idx * 100;
          },
          animationDelay: function (idx) {
            // 越往后的数据延迟越大
            return idx * 100;
          },
          animationDelayUpdate: function (idx) {
            // 越往后的数据延迟越大
            return idx * 100;
          }
        };
        myChart.setOption(option, true);

      }
    },
    watch: {
      positionByCity: function () {
        setTimeout(() => {
          //do nothing
        }, 1000);
        let myChart1 = this.$echarts.getInstanceByDom(document.getElementById('echartContainer10'));
        if (!myChart1) {
          return false
        }

        let myOption = myChart1.getOption();
        if (!myOption) {
          return false
        }

        if (!this.positionByCity[0]) {
          return false
        }
        console.info("PositionByCity Changed");
        setTimeout(() => {
          this.drawMap();
        })
      }
    },
    mounted() {

      this.drawBarChart();
    }

  };
</script>
<style scoped>
  #echartContainer10 {
    width: 100%;
    height: 100%;
  }
</style>
